{extend name="public/base" /}
{block name="style"}
<style>
    /* 状态Tab样式 */
    .status-tabs {
        display: flex;
        background-color: white;
        border-bottom: 1px solid #eee;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .status-tab {
        flex: 0 0 auto;
        padding: 12px 18px;
        font-size: 15px;
        color: #666;
        position: relative;
        cursor: pointer;
        white-space: nowrap;
    }

    .status-tab.active {
        color: #1AAD19;
    }

    .status-tab.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #1AAD19;
    }

    /* 列表容器样式 */
    .weui-panel {
        margin: 10px;
        border-radius: 8px;
        overflow: hidden;
        background-color: white;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }

    /* 列表项样式 */
    .record-list {
        background-color: white;
    }

    .record-item {
        padding: 15px;
        border-bottom: 1px solid #f5f5f5;
    }

    .record-item:last-child {
        border-bottom: none;
    }

    /* 订单号行（移除右上角时间） */
    .order-header {
        margin-bottom: 10px; /* 只保留底部间距 */
    }

    .order-number {
        font-size: 15px;
        color: #333;
        display: flex;
        align-items: center;
    }

    .order-number .copy-icon {
        color: #888;
        cursor: pointer;
        margin-left: 8px;
        font-size: 14px;
        transition: color 0.2s;
    }

    .order-number .copy-icon:hover {
        color: #1AAD19;
    }

    /* 详情区域布局（整合时间） */
    .record-details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 0;
        font-size: 14px;
    }

    .detail-item {
        color: #888;
    }

    .detail-item span {
        color: #888;
        margin-left: 4px;
    }

    /* 金额样式 */
    .amount.income {
        color: #00b42a;
        font-weight: 500;
    }

    .amount.expense {
        color: #E64340;
        font-weight: 500;
    }

    /* 交易类型标签 */
    .type-tag {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
        background-color: #f5f5f5;
        color: #666;
    }

</style>
{/block}
<!--主体-->
{block name="content"}
<div class="header">
    <a href="javascript:void(0);" class="back-btn">
        <i class="fa fa-angle-left" style="font-size: 24px;"></i>
    </a>
    <h1 class="header-title">流水列表</h1>
</div>
<div class='weui-content'>
    <div class="status-tabs">
        <div class="status-tab active" onclick="switchTab(0,this)">全部</div>
      {volist name="Think.config.global.TRADE_LIST_MAP" id="item" }
         <div class="status-tab"  onclick="switchTab('{$key}',this)">{$item}</div>
     {/volist}
    </div>
    <div class="weui-panel">
        <div class="record-list" style="height:90vh; overflow:auto;">


        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var page = 1;
    var loading = false;  // 加载状态锁
    var pay_status = 0;
    var switchTimer = null; // Tab切换防抖计时器
    var scrollTimer = null; // 滚动加载防抖计时器
    var requestId = 0; // 请求唯一标识

    // 滚动加载更多（防抖）
    $(".record-list").infinite().on("infinite", function() {
        if (loading) return;

        clearTimeout(scrollTimer);
        scrollTimer = setTimeout(function() {
            if (loading) return;

            loading = true;
            page++;
            load(page);
        }, 500);
    });

    // Tab切换（防抖）
    function switchTab(status, obj) {
        clearTimeout(switchTimer);
        switchTimer = setTimeout(function() {
            $(".record-list").empty();
            loading = false;
            page = 1;
            pay_status = status;
            requestId++; // 更新标识，使旧请求失效
            load(page, obj);
        }, 300);
    }

    // 初始加载
    $(function() {
        $(".status-tabs").find(".status-tab").eq(0).click();
    });

    // 加载数据（适配无fail的post方法）
    function load(page, obj) {
        $('.load-more').show();
        var currentId = requestId; // 记录当前请求标识

        // 调用改造后的post方法，传入成功和错误回调
        post(
                "/pay-list.html",
                { page: page, limit: 7, field: "id", order: "desc", status: pay_status },
                // 成功回调
                function(res) {
                    if (currentId !== requestId) return; // 忽略过期请求

                    loading = false;
                    $('.load-more').hide();

                    if (res !== "") {
                        $(".record-list").append(res);
                    } else {
                        loading = true;
                        page--; // 无数据回退页码
                        $(".record-list").find(".weui-cells__title").remove();
                        $(".record-list").append("<div class=\"weui-cells__title\"><p class='center-div'>已无更多数据</p></div>");
                    }

                    if (obj) {
                        $(obj).parent().find(".status-tab").removeClass("active");
                        $(obj).addClass("active");
                    }
                },
                // 错误回调（网络错误或状态码非0时触发）
                function(errorMsg) {
                    if (currentId !== requestId) return; // 忽略过期请求

                    loading = false;
                    $('.load-more').hide();
                    page--; // 错误时回退页码
                }
        );
    }
</script>
{/block}